<template>
  <div>
    <el-dialog :title="$t('libraryManagement.select')" v-model="visibleDialog" width="700px" :append-to-body="true"
      :close-on-click-modal="false" @close="closeClick" @open="open">
      <div class="dialog_body">
        <div class="dialog_box left_box">
          <el-table :data="list" style="width: 100%" height="460px" v-loading="pageLoading"
            @row-dblclick="tableRowDbClick">
            <el-table-column :label="$t('libraryManagement.wikiNames')" prop="">
              <template #default="scope">
                <i class="el-icon-s-data" style="color:#3f74f6"></i>
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination v-model:current-page="requestParams.page" :page-size="requestParams.limit" size="small" 
             layout="total, prev, pager, next" :total="total" 
            @current-change="handleCurrentChange" /> 
          </div>
            <div class="dialog_box">
              <el-tag v-for="(item, index) in tableData" :key="index" closable class="tag_class"
                @close="handleClose(item)">
                <i class="el-icon-s-data"></i>
                <span>{{ item.name }}</span>
              </el-tag>
            </div>
        </div>
        <template #footer>
          <span class="mt-2">
            <el-button @click="closeClick">{{ $t("commen.cancel") }}</el-button>
            <el-button type="primary" @click="confirmClick">{{ $t("commen.confirm") }}</el-button>
          </span>
        </template>

    </el-dialog>
  </div>
</template>

  <script lang="ts" setup name="selectLibrary">
  import { aiqaDifyDatasets } from '@/api/know/wikiApps/indexApi';

  const pageLoading = ref(false)
  const visibleDialog = ref(false)
  const list = ref([])
  const tableData = ref([])
  const requestParams = ref({
    page: 1,
    limit: 10
  })
  const total = ref()

  const emit = defineEmits(["confirm"]);

  const open = () => {
    getList();
  }

  const getList = () => {
    pageLoading.value = true;
    aiqaDifyDatasets({
      page: requestParams.value.page,
      limit: requestParams.value.limit,
    }).then((res: any) => {
      pageLoading.value = false;
      list.value = res.data;
      total.value = res.total;
    });
  }
const handleCurrentChange = (val:any) =>{
  requestParams.value.page = val;
  getList();
}
  // 双击表格
  const tableRowDbClick = (row: any) => {
    const existingItem = tableData.value.find((item: any) => item.id === row.id);

    if (!existingItem) {
      tableData.value.push(row);
    }
  }

  // 删除tag
  const handleClose = (tag) => {
    tableData.value.splice(tableData.value.indexOf(tag), 1);
  }

  const closeClick = () => {
    visibleDialog.value = false;
    tableData.value = [];
  }

  const confirmClick = () => {
    emit("confirm", tableData.value);
    closeClick();
  }

  defineExpose({
    visibleDialog,
    tableData
  })
</script>
  <style lang="scss" scoped>
  ::v-deep .el-dialog__body {
    padding: 15px 20px;
  }

  .dialog_body {
    display: flex;
  }

  .dialog_box {
    flex: 1;
    margin: 0 5px;
    height: 501px;
    overflow-y: auto;
    // border: 1px solid #eee;
  }

  .left_box {
    border-right: 1px solid #eee;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
  }

  .tag_class {
    margin-right: 5px;
    margin-bottom: 5px;
  }
</style>